<template>
    <div>
        <headerBox />
        <div class="main-box">
            <div>
                <img
                    class="left-bg"
                    src="@/assets/loginAdmin/loginImgBgadmin.png"
                    alt=""
                />
            </div>
            <form @submit.prevent="goLogin">
                <div class="loginBox">
                    <div class="title">账号登录</div>
                    <div class="inp-box">
                        <input
                            v-model="loginData.loginName"
                            placeholder="请输入管理员账号"
                            autocomplete="username"
                        />
                    </div>
                    <div class="inp-box">
                        <input
                            v-model="loginData.password"
                            type="password"
                            placeholder="请输入登录密码"
                            autocomplete="current-password"
                        />
                    </div>
                    <div class="inp-box">
                        <input
                            type="text"
                            placeholder="请输入验证码"
                            maxlength="4"
                            class="code-input"
                            v-model="loginData.code"
                        />
                        <img
                            :src="loginCodeUrl"
                            class="code-img"
                            @click="setCode"
                        />
                    </div>
                    <div class="loginBtnBox">
                        <el-button
                            :disabled="isDisable"
                            style="width: 100%; height: 100%"
                            type="primary"
                            class="logon-btn"
                            @click="goLogin"
                            >登录</el-button
                        >
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, inject, computed, reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import headerBox from "@/components/headerBox.vue";
import { useCaptcha } from "./login.js";
import JsEncrypt from "jsencrypt";
import sha1 from "sha1";
import { login } from "@/api/loginAmdin";
import { useStore } from "vuex";
const store = useStore();

const loginData = reactive({
    loginName: "",
    password: "",
    code: "",
});

// 设置登录方法
const { loginCodeUrl, setCode } = useCaptcha();
setCode();

const isDisable = computed(() => {
    return loginData.loginName && loginData.password && loginData.code
        ? false
        : true;
});

const goLogin = () => {
    let jse = new JsEncrypt();
    jse.setPrivateKey(
        "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDccAaFprbNPIntSYY14UVIfWHFWh/NyarQDm/nD8fjC0Tp3EglSlDWKBveWFXZ+iNjG6Zjgl68rzpB+wpxrIrg7zWRWnGRp7AemRWQ4ImFVXNWLlEIl1qUbDhakDZEV5LRYdgP8pQ07F1nLWWZensrlJ62bXxSIZ+Qh/ySjp2sKQIDAQAB"
    );
    const data = {
        loginCode: loginData.loginName,
        password: jse.encrypt(sha1(loginData.password)),
        verifyCode: loginData.code,
    };
    login(data).then((res) => {
        console.log(res);
        if (res.returnCode == 0) {
            ElMessage.success("登录成功");
            const { body } = res;
            const { sessionId, operatorName, menuList } = body;
            store.commit("setOperatorName", operatorName);
            store.commit("setMenuList", menuList);
            store.commit("setSessionId", sessionId);
            router.push({
                name: "systemMana",
            });
        } else if (res.returnCode === "016" || res.returnCode == "2603") {
            ElMessage.error(res.returnMsg);
            setCode();
        } else {
            ElMessage.error(res.returnMsg);
        }
    });
};
</script>

<style scoped>
.headerBox {
    height: 65px;
    line-height: 65px;
    background-color: #fff;
    box-shadow: 0 3px 3px #efeff0;
    padding-left: 20px;
    box-sizing: border-box;
}

.headerBox img {
    height: 65px;
}

.main-box {
    width: 1000px;
    height: auto;
    margin: 88px auto;
    display: flex;
    justify-content: space-between;
}

.left-bg {
    width: 541px;
    height: 541px;
}

.loginBox {
    width: 400px;
    background-color: #fff;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 0 0 3px #f0f0f1;
    border-radius: 4px;
    height: 400px;
}

.title {
    font-size: 18px;
    color: #1d78fe;
    display: inline-block;
}

.inp-box {
    width: 320px;
    height: 43px;
    background-color: #f7f7f7;
    margin-top: 15px;
    position: relative;
    display: flex;
    align-items: center;
}

.code-img {
    height: 100%;
}

.loginBtnBox {
    height: 44px;
    width: 100%;
    margin: 18px 0;
}
</style>
